<template>
  <a-card title="客户金额统计" :bordered="false" class="info-card">
    <div class="amount-list flex justify-between">
      <div class="amount-item flex align-center">
        <i class="iconfont icon-chongzhi1"></i>
        <div class="detail-box">
          <div class="label">总充值</div>
          <div class="value">{{amountTotal.amount}}</div>
        </div>
      </div>
      <div class="amount-item flex align-center">
        <i class="iconfont icon-shangchang"></i>
        <div class="detail-box">
          <div class="label">总消费</div>
          <div class="value">{{amountTotal.userAmount}}</div>
        </div>
      </div>
      <div class="amount-item flex align-center">
        <i class="iconfont icon-yue"></i>
        <div class="detail-box">
          <div class="label">总余额</div>
          <div class="value">{{amountTotal.validAmount}}</div>
        </div>
      </div>
    </div>
  </a-card>
  <a-card title="客户金额查询" :bordered="false" class="condition-card mt-20">
    <div class="condition-row">
      <div class="condition-col flex align-center justify-between">
        <div class="input-box flex align-center">
          <span class="label mr-20">账号</span>
          <a-input allow-clear placeholder="请输入账号" v-model:value="conditionState.userName"></a-input>
        </div>
        <a-button class="ml-20" type="primary" :loading="searchLoading" @click="handleSearch">查询</a-button>
      </div>
    </div>
  </a-card>
  <a-card title="客户金额列表" :bordered="false" class="result-card mt-20">
    <a-table :columns="columns" :data-source="userList" :pagination="false" :scroll="{y: 'calc(100vh - 565px)'}" @change="handleTableChange">
    </a-table>
    <div class="pagination-content flex justify-end">
      <a-pagination v-model:current="conditionState.page" show-quick-jumper show-size-changer :show-total="total => `共 ${total} 条`" :total="total" v-model:pageSize="conditionState.size" @change="handlePageChange" />
    </div>
  </a-card>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import api from '../../api/users'
import staApi from '../../api/statistics'
import {UserItem} from '../../types/common'
import {UserTypes, UserTypesObj, UserSex} from '../../common/constants'
import {formatDateTime, uuid} from '../../common/utils'
const searchLoading = ref<boolean>(false)
const conditionState = reactive({
  userName: '',
  userType: UserTypesObj.client.code,
  page: 1,
  size: 10,
})
const total = ref<number>(0)
const userList = ref<UserItem[]>([])
const amountTotal = reactive({
  amount: 0,
  userAmount: 0,
  validAmount: 0
})
const columns = [
  {
    dataIndex: 'userName',
    key: 'userName',
    title: '账号',
  },{
    dataIndex: 'amount',
    key: 'amount',
    title: '总充值',
  },{
    dataIndex: 'userAmount',
    key: 'userAmount',
    title: '已消费',
  },{
    dataIndex: 'validAmount',
    key: 'validAmount',
    title: '余额',
  },
]
const getAmountTotalData = async () => {
  try {
    const res = await staApi.getTotalAmount()
    if (res.content) {
      amountTotal.amount = res.content.amount || 0
      amountTotal.userAmount = res.content.userAmount || 0
      amountTotal.validAmount = res.content.validAmount || 0
    }
  } catch(e){

  }
}
getAmountTotalData()
const getPageData = async () => {
  searchLoading.value = true
  userList.value = []
  try {
    const res = await api.getUserAmountList({
      userName: conditionState.userName || '',
      page: conditionState.page - 1,
      size: conditionState.size,
    })
    searchLoading.value = false
    if (res.content) {
      total.value = res.content.total || 0
      if (res.content.content && res.content.content.length) {
        userList.value = res.content.content
      }
    }
  } catch(e: any) {
    searchLoading.value = false
  }
}
const handleSearch = () => {
  conditionState.page = 1
  total.value = 0
  getPageData()
}
const handlePageChange = (page: number, pageSize: number) => {
  if (pageSize !== conditionState.size) {
    conditionState.page = 1
  }
  getPageData()
}
const handleTableChange = (pagination, filters, sorter, { currentDataSource }) => {
  console.log(pagination, filters, sorter)
}
handleSearch()

</script>

<style scoped lang="less">
.condition-col{
  .ant-input{
    min-width: 300px;
  }
  .ant-select{
    min-width: 160px;
  }
  .ant-input-affix-wrapper{
    width: 200px;
  }
}
.amount-list{
  .amount-item{
    position: relative;
    padding: 5px 40px;
    border-radius: 5px;
    background: #f1f1f1;
    box-shadow: 0px 0px 3px #ccc;
    .iconfont{
      font-size: 40px;
      margin-right: 20px;
    }
    .label{
      font-size: 18px;
    }
    .value{
      font-size: 22px;
      font-weight: bold;
    }
  }
}
.ant-btn-link{
  padding: 0;
}
</style>
